<template>
  <div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="班级">
            <span>{{ props.row.className }}</span>
          </el-form-item>
          <el-form-item label="学生名">
            <span>{{ props.row.studentName }}</span>
          </el-form-item>
          <el-form-item label="查重率">
            <span>{{ props.row.checkRate }}</span>
          </el-form-item>
          <el-form-item label="分数">
            <span>{{ props.row.score }}</span>
          </el-form-item>
          <el-table-column>
            <el-button type="text" @click="getContent(props.row.id)">评分</el-button>
          </el-table-column>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="班级"
      prop="className">
    </el-table-column>
    <el-table-column
      label="学生名"
      prop="studentName">
    </el-table-column>
    <el-table-column
      label="查重率"
      prop="checkRate">
    </el-table-column>
  </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      workId: 0,
      classname: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: []
    }
  },
  created () {
    this.getCheckInfo()
  },
  watch: {
    '$route' (to, from) {
      this.getCheckInfo();
    }
  },
  methods: {
    getCheckInfo () {
      if (this.$route.query.workId != null){
        this.workId = this.$route.query.workId
      }
      if (this.workId === 0) {
        let jsonObj = {'userName': this.$store.state.user.name, 'page': this.pageIndex, 'limit': this.pageSize}
        axios.post('http://127.0.0.1:8091/checkInfo', jsonObj).then(({data}) => {
          console.log(this.workId)
          this.tableData = data && data.errCode === 0 ? data.info : []
          this.totalPage = data && data.errCode === 0 ? data.total : 0
        }).catch(({data}) => {
          this.$message.error(data.errMsg)
        })
      } else {
        let jsonObj = {'workId': this.workId, 'page': this.pageIndex, 'limit': this.pageSize}
        axios.post('http://127.0.0.1:8091/checkInfo', jsonObj).then(({data}) => {
          this.tableData = data && data.errCode === 0 ? data.info : []
          this.totalPage = data && data.errCode === 0 ? data.total : 0
        }).catch(({data}) => {
        this.$message.error(data.errMsg)
      })
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getCheckInfo()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getCheckInfo()
    },
    getContent(id) {
      this.$router.push({name:'content', query: {id: id, workId: this.workId}})
    }
  }
}
</script>
